<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="showAddPop">添加</el-button>
    <!-- 表格 -->
    <v-list
      :info="info"
      :list="list"
      @init="getList"
      @showUpdate="showUpdate"
    ></v-list>
    <!-- 弹出框 -->
    <v-form :info="info" @init="getList" ref="form"></v-form>
    <!-- 分页器 -->
    <el-pagination @current-change="changePage" background layout="prev, pager, next" :total="total" :page-size="size">
    </el-pagination>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { requserlist,requsercount } from "../../http/api";
import { toggle } from "../../mixins/index";
export default {
  mixins: [toggle],
  components: { vList, vForm },
  data() {
    return {
      info: {
        isShow: false,
        isAdd: true,
      },
      list: [],
      size:2,//一页显示条数
      page:1,//页数
      total:0,
    };
  },
  computed: {
    ...mapGetters({}),
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapActions({}),
    //获取数据总条数
    async getCountTotal(){
      let {data:res} = await requsercount();
      if(res.code == 200){
        this.total = res.list[0].total;
      }
    },
    //获取数据列表
    async getList() {
      let { data: res } = await requserlist({
        size:this.size,
        page:this.page,
      });
      if (res.code == 200) {
        let arr = res.list ? res.list : [];
        if(arr.length ==0  && this.page !=1  ){
          this.page--;
          this.getList();
          return;
        }
        this.list = arr;
        //获取总条数
        this.getCountTotal();
      }
    },
    //分页器页码变化触发
    changePage(e){
      this.page = e;
      this.getList();
    }
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>